Blog Pion79

Zod 가 뭐지?

■ 개념 정의

: Zod는 입력 데이터(폼 데이터, API 응답, JSON, 객체 등)를 타입과 형태에 맞게 검증하는 라이브러리 입니다. 내가 원하는 데이터 구조를 정의해두고, 실제 데이터가 그 구조에 맞는지 검사하는 용도로 사용됩니다. 특히 TypeScript 환경에서 타입과 런타임 검증을 동시에 할 수 있다는 점이 가장 큰 장점입니다.

■ 사용목적

ⓐ 타입 스크립트 타입을 정의하거나, 런타임 데이터를 검증하는 데 사용합니다.
ⓑ 빠르고, 사용법이 직관적이며 yup, joi 보다 가볍고 타입 스크립트에 친화적 이라고 합니다.
ⓒ NestJS, React, Next.js, tRPC, Vite 와 호환성이 높다고 합니다.

주요 메서드

Zod 에서 자주 사용하는 메서드 입니다.

메서드	설명	예시
`z.string()`	문자열 인지 확인	‘hello’ : o<br>123 : x
`z.number()`	숫자 인지 확인	123 : o<br>‘abc’ : x
`z.boolean()`	true / false 인지 확인	true : o<br>‘true’ : x
`z.array()`	배열 인지 확인	[1,2,3] : o<br>‘123’ : x
`z.object()`	객체 인지를 확인하고, 내부 구조(스키마)까지 검증	{name:’a’} : o
`.min(n)`	최소값(숫자) 또는 최소 길이(문자열/배열)를 확인	`z.string().min(3)`
`.max(n)`	최대값(숫자) 또는 최대 길이(문자열/배열)를 확인	`z.number().max(10)`
`.email()`	문자열이 이메일 형식인지를 확인	‘a@b.com’ : o
`.optional()`	값이 있어도 되고, 없어도 됨	undefined : o
`.nullable()`	null 허용	null : o
`.safeParse(data)`	데이터 검증하고 결과 반환	결과 : success/data/error

사용 예시

■ 설치방법

npm install zod

■ 기본 사용법 : 스키마 검증

ⓐ 데이터에서 스키마(숫자, 문자열, 이메일)가 맞는지 검사하고, 맞다면 data를 반환하고 아니면 error을 반환합니다.

import { z } from "zod";

// 스키마 정의
const UserSchema = z.object({
  name: z.string(),
  age: z.number(),
  email: z.string().email(),
});

// 데이터 검증
const result = UserSchema.safeParse({
  name: "혜인",
  age: 25,
  email: "hello@yonghyein.kr",
});

if (!result.success) {
  console.log(result.error);
} else {
  console.log(result.data);
}

■ 기본 사용법 : 폼 데이터 검증(React)

ⓐ 이메일 폼 등에서 입력 값을 검증하는데 사용하는 예시, username이 3자 이상, password가 6자 이상 아니면 에러 반환합니다.

const schema = z.object({
  username: z.string().min(3),
  password: z.string().min(6),
});

const formData = {
  username: "ab",
  password: "12345",
};

const check = schema.safeParse(formData);

if (!check.success) {
  console.log(check.error.format());
}

■ 기본 사용법 : 메서드 사용 예시

const schema = z.object({
  title: z.string().min(3), // 문자열, 최소 3자
  views: z.number().min(0), // 숫자, 최소 0
  isPublished: z.boolean(), // true/false
  tags: z.array(z.string()), // 문자열 배열
  email: z.string().email(), // 이메일 형식
  description: z.string().optional(), // 있어도 되고 없어도 됨
});

Zod 검증